<template>
  <div class="page-container detail-container">
    <el-row :gutter="20">
      <el-col :span="8">产品ID<span class="detail-value">{{detailData.productId}}</span></el-col>
      <el-col :span="8">权益类别<span class="detail-value">{{detailData.privilegeType}}</span></el-col>
      <el-col :span="8">所属品牌<span class="detail-value">{{detailData.brandName}}</span></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">SKU<span class="detail-value">{{SKU[detailData.sku]}}</span></el-col>
      <el-col :span="8">产品名称<span class="detail-value">{{detailData.productName}}</span></el-col>
      <el-col :span="8">规格<span class="detail-value">{{detailData.spec}}</span></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">库存<span class="detail-value">{{detailData.stock}}</span></el-col>
      <el-col :span="8">成本价格<span class="detail-value">{{detailData.costPrice}}</span></el-col>
      <el-col :span="8">销售价格<span class="detail-value">{{detailData.salePrice}}</span></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">活动价格<span class="detail-value">{{detailData.activityPrice}}</span></el-col>
      <el-col :span="8">现金+积分价格<span class="detail-value">{{`${detailData.score}元积分+${detailData.scorePrice}元现金`}}</span></el-col>
      <el-col :span="8">使用有效期限<span class="detail-value">{{ detailData.validityPeriod + Period[detailData.time]}}</span></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">描述<span class="detail-value">{{detailData.description}}</span></el-col>
      <el-col :span="8">状态<span class="detail-value">{{STATUS[detailData.status]}}</span></el-col>
      <el-col :span="8">创建时间<span class="detail-value">{{detailData.createDate | dateFrm}}</span></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">销售数量<span class="detail-value">{{detailData.saleAmount || 0}}</span>
        <el-button type="primary" size="mini" @click="linkToOrderDetail">查看详单</el-button>
      </el-col>
    </el-row>
    <div class="detail-toolbar">
      <!-- <el-button type="primary" size="small">修改</el-button>
      <el-button type="primary" size="small">生成兑换码</el-button> -->
      <el-button size="small" @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import {SKU, STATUS, Period} from '@/utils/const'; 
import {productDetail} from '@/api/product'

export default {
  name: 'ProductDetail',
  props: [],
  data() {
    this.SKU = SKU;
    this.STATUS = STATUS;
    this.Period = Period;
    return {
      detailData: {}
    }
  },
  methods: {
    async requestDetail(id) {
      try {
        const {data} = await productDetail(id)
        if (data) {
          this.detailData = {
            ...data
          }
        } else {
          this.cancel();
        }
      } catch(err) {
        this.cancel();
      }
    },
    cancel() {
      this.$router.go(-1);
    },
    linkToOrderDetail() {
      this.$router.push({name: 'equitySaleTotal'})
    }
  },
  created() {
    let {id} = this.$route.params;
    if (id) {
      this.requestDetail(id);
    } else {
      this.cancel();
    }
  }
}
</script>

<style lang="scss">

</style>